<template>
	<view>
		<view class="input">
			<input type="password" v-model.trim="oldPassword" placeholder="旧密码" />
			<p class="warning" v-show="isShort_o">长度不少于6位</p>
			<input type="password" v-model.trim="newPassword" placeholder="新密码"/>
			<p class="warning" v-show="isShort_n">长度不少于6位</p>
			<input type="password" v-model.trim="confirm" placeholder="确认密码"/>
			<p class="warning" v-show="!isSame">两次密码输入不一致</p>
		</view>
		
		<view class="confirm">
			<button type="primary" :disabled="!isConfirm" @click="modifypsw">确认并保存</button>
		</view>
	</view>
</template>

<script>
	import http from '@/api/http.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				oldPassword:"",
				newPassword:"",
				confirm:"",
			};
		},
		computed:{
			isConfirm(){
				return this.oldPassword && this.newPassword && this.newPassword===this.confirm;
			},
			isSame(){
				if(this.confirm!==""){
					return this.newPassword === this.confirm;
				}else{
					return true;
				}
			},
			isShort_o(){
				if(this.oldPassword){
					return this.oldPassword.length<5;
				}
				return false;
			},
			isShort_n(){
				if(this.newPassword){
					return this.newPassword.length<5;
				}
				return false;
			},
			...mapState(['userInfo'])
		},
		methods:{
			async modifypsw(){
				uni.showModal({
					title: '系统提示',
					content: '修改密码将重新登录，确定要修改密码',
					success:async (res)=>{
						if (res.confirm) {
							let result=await http.modifyPassword({
									oldPassword:this.oldPassword,
									newPassword:this.newPassword,
									username:this.userInfo.username
								});
								console.log(result);
								if(result.code === 100){
									this.$store.commit('logout');
									uni.showToast({
										title:result.msg,
										icon:'success',
										success:()=>{
											uni.redirectTo({
												url:'../login/login'
											});
										}
									})
								}else{
									uni.showToast({
										title:result.msg,
									})
								}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.input{
		background: #fff;
		padding: 20rpx;
		input{
			border: 2rpx solid #ddd;
			margin-top:20rpx;
			background: #f2f2f2;
			height: 30rpx;
		}
	}
	.confirm{
		margin-top: 60rpx;
		padding: 0 30rpx;
	}
	.warning{
		color: red;
	}
</style>
